<template>
  <div>
    <div align="center">
      <h1>注册页面</h1>
      <el-form ref="registerForm" :model="registerForm" style="width: 500px" :rules="rules">
        <el-form-item label="联系人姓名" prop="username">
          <el-input v-model="registerForm.username" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="registerForm.mobile" />
        </el-form-item>
        <el-form-item style="width: 350px" label="验证码" prop="mobileCode">
          <el-input v-model="registerForm.mobileCode" /><a @click="getCode">获取验证码</a>
        </el-form-item>
        <el-form-item label="请输入密码" prop="password">
          <el-input v-model="registerForm.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="请再次确认密码" prop="checkPassword">
          <el-input v-model="registerForm.checkPassword" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-radio v-model="registerForm.apartmentOperatorType" label="0">个人职业房东</el-radio>
          <el-radio v-model="registerForm.apartmentOperatorType" label="1">公司化公寓</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button @click="registerSubmit('registerForm')">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.registerForm.checkPassword !== '') {
          this.$refs.registerForm.validateField('checkPassword')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      registerForm: {
        apartmentOperatorType: 0
      },
      rules: {
        username: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        mobileCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPassword: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
  },
  methods: {
    getCode() {
      // eslint-disable-next-line eqeqeq
      if (this.registerForm.mobile == null) {
        alert('请输入手机号')
        return
      }
      this.axios.post('http://localhost:9999/WEISHU-SYSTEM-MANAGEMENT/tbSmsRecords/sendSms', this.registerForm).then((response) => {
        console.log(response.data)
        // eslint-disable-next-line eqeqeq
        if (response.data.code == 3001) {
          alert('号码已存在')
          return
          // eslint-disable-next-line eqeqeq
        } else if (response.data.code == 3002) {
          alert('验证短信未超过两分钟')
          return
        }
      })
    },
    registerSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post('http://localhost:9999/WEISHU-SYSTEM-MANAGEMENT/sysUser/register', this.registerForm).then((response) => {
            console.log(response.data)
            // eslint-disable-next-line eqeqeq
            if (response.data.code == 3001) {
              alert('号码已存在')
              return
              // eslint-disable-next-line eqeqeq
            } else if (response.data.code == 3004) {
              alert('验证码错误')
              return
              // eslint-disable-next-line eqeqeq
            } else if (response.data.code == 200) {
              console.log(response.data.obj)
              console.log(typeof response.data.obj)
              alert('注册成功')
              // eslint-disable-next-line eqeqeq
              if (this.registerForm.apartmentOperatorType == 0) {
                console.log('-->前往个人商户平台补全页面')
                this.$router.push({
                  path: '/perfect',
                  query: {
                    userId: response.data.obj,
                    type: 0
                  }
                })
              } else {
                console.log('-->前往公司化公寓平台补全页面')
                this.$router.push({
                  path: '/perfect2',
                  query: {
                    userId: response.data.obj,
                    type: 1
                  }
                })
              }

              return
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
